<script setup lang="ts">
import { ref } from 'vue';
import { useMemberStore } from '@/stores';
import { putMemberUserAPI } from '@/services/profile';

const memberStore = useMemberStore();
const isModalVisible = ref(false);
const replyInput = ref('');
const selectedMessage = ''; // 这里应该是一个状态，根据你的逻辑来填充
// 修改设备使用者
const onChangeDeviceUser = () => {
  isModalVisible.value = true;
};
// 关闭弹窗
const closeModal = () => {
  isModalVisible.value = false;
};

// 确定回复
const onReply = async () => {
  const deviceId = replyInput.value.trim();
  if (deviceId) {
    try {
      // 准备发送到后端的数据
      const data = {
        userId: memberStore.profile?.userId,
        deviceCode: deviceId
      };

      // 调用后端API来更新设备使用者
      await putMemberUserAPI(data);

      // 显示成功消息
      uni.showToast({
        title: '设备使用者已修改',
        icon: 'success',
        duration: 2000
      });

      // 关闭弹窗
      closeModal();
    } catch (error) {
      console.error('修改设备使用者出错：', error);
      // 如果API调用失败，则显示错误消息
      uni.showToast({
        title: '修改设备使用者失败',
        icon: 'none',
        duration: 2000
      });
    }
  } else {
    // 如果设备ID为空，则显示错误消息
    uni.showToast({
      title: '设备ID不能为空',
      icon: 'none',
      duration: 2000
    });
  }
};

// 退出登录
const onLogout = () => {
  // 模态弹窗
  uni.showModal({
    content: '是否退出登录？',
    success: (res) => {
      if (res.confirm) {
        // 清理用户信息
        memberStore.clearProfile()
        // 返回上一页
        uni.navigateBack()
      }
    },
  })
}
</script>

<template>
  <view class="viewport">
 <!--   <view class="list" v-if="memberStore.profile">
      <navigator url="/pageMember/Contact/Contact" hover-class="none" class="item arrow">
        联系人
      </navigator>
    </view>
    <view class="list">
      <button hover-class="none" class="item arrow" open-type="openSetting">授权管理</button>
      <button hover-class="none" class="item arrow" open-type="feedback">问题反馈</button>
      <button hover-class="none" class="item arrow" open-type="contact">联系我们</button>
    </view>
    <view class="list">
      <navigator hover-class="none" class="item arrow" url=" ">关于</navigator>
    </view> -->
    <!-- 操作按钮 -->
    <view class="action" v-if="memberStore.profile">
      <view @tap="onLogout" class="button">退出登录</view>
    </view>
  </view>
  <view  class="popup" v-show="isModalVisible">
    <view class="popup-content">
      <button class="close-button" @click="closeModal">×</button>
      <input v-model="replyInput" placeholder="请输入设备ID" />
      <button @click="onReply" class="huifu">确定</button>
    </view>
  </view>
</template>

<style lang="scss">
  .popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;

    .popup-content {
      background-color: #fff;
      padding: 20px;
      border-radius: 20px;
      width: 200px;
      height: 150px;
    }
    .popup-content {
        position: relative;
        .close-button {
          position: absolute;
          top: -25px;
          right: 1px;
          font-size: 40px;
          color: #333;
          background: none;
          border: none;
          cursor: pointer;
        }
        .huifu{
          position: absolute;
          background-color: #A5DD9B;
          width: 50%;
          bottom: 20px; /* 距离底部的距离 */
          left: 50%; /* 居中 */
          transform: translateX(-50%); /* 使按钮居中 */
        }
        }


  }
page {
  background-color: #f4f4f4;
}

.viewport {
  padding: 20rpx;
}

/* 列表 */
.list {
  padding: 0 20rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
  border-radius: 10rpx;

  .item {
    line-height: 90rpx;
    padding-left: 10rpx;
    font-size: 30rpx;
    color: #333;
    border-top: 1rpx solid #ddd;
    position: relative;
    text-align: left;
    border-radius: 0;
    background-color: #fff;

    &::after {
      width: auto;
      height: auto;
      left: auto;
      border: none;
    }

    &:first-child {
      border: none;
    }

    &::after {
      right: 5rpx;
    }
  }

  .arrow::after {
    content: '\e6c2';
    position: absolute;
    top: 50%;
    color: #ccc;
    font-family: 'erabbit' !important;
    font-size: 32rpx;
    transform: translateY(-50%);
  }
}

/* 操作按钮 */
.action {
  text-align: center;
  line-height: 90rpx;
  margin-top: 40rpx;
  font-size: 32rpx;
  color: #333;

  .button {
    background-color: #fff;
    margin-bottom: 20rpx;
    border-radius: 10rpx;
  }
}
</style>
